<template>
  <view class="hall-container">
    <!-- 顶部标题栏（带搜索入口） -->
    <view class="header-bar">
      <view class="page-title">抢单大厅</view>
      <view class="search-btn" @click="showSearchPopup = true">
        <text class="search-icon">🔍</text>
        <text class="search-text">搜索工单</text>
      </view>
    </view>
    
    <!-- 显示当前位置信息 -->
    <view class="location-info">
      <view class="location-header">
        <text class="location-title">当前位置</text>
      </view>
      <view class="location-content">
        <text class="location-text">{{ address }}</text>
        <!-- 添加手动获取位置的按钮 -->
        <button class="get-location-btn" @click="initLocation">重新获取位置</button>
      </view>
    </view>

    <!-- 搜索弹窗 -->
    <view class="popup-overlay" v-if="showSearchPopup" @click="showSearchPopup = false">
      <view class="search-popup" @click.stop>
        <view class="search-header">
          <input 
            class="search-input" 
            placeholder="请输入工单标题关键词" 
            v-model="searchKeyword"
            @confirm="performSearch"
          />
          <button class="search-button" @click="performSearch">搜索</button>
        </view>
        <view class="search-footer">
          <button class="cancel-button" @click="showSearchPopup = false">取消</button>
        </view>
      </view>
    </view>

    <!-- 显示搜索结果信息 -->
    <view class="search-info" v-if="isSearching">
      <text>搜索关键词: "{{ searchKeyword }}" (共找到 {{ orderList.length }} 条记录)</text>
      <text class="clear-search" @click="clearSearch">清除搜索</text>
    </view>

    <!-- 工单列表（带下拉刷新+空状态） -->
    <view class="order-list-container">
      <!-- 下拉刷新区域 -->
      <view 
        class="refresh-wrapper"
        @touchstart="handleTouchStart"
        @touchend="handleTouchEnd"
        :class="{ refreshing: isRefreshing }"
      >
        <!-- 刷新图标 -->
        <view class="refresh-icon" v-if="isRefreshing">
          <view class="spinner"></view>
        </view>

        <!-- 工单列表 -->
        <view class="order-list">
          <view 
            class="order-item" 
            v-for="order in orderList" 
            :key="order.id"
            :class="{ 'order-item--grabbed': order.disabled }"
          >
            <!-- 工单类型标签（根据不同类型显示不同颜色） -->
            <view class="order-tag" :class="getOrderTagClass(order.type)">
              {{ getOrderTypeName(order.type) }}
            </view>
            
            <!-- 紧急标识（仅当type为1时显示） -->
            <view class="order-urgency-badge" v-if="isUrgentOrder(order.type)">
              紧急
            </view>

            <!-- 工单头部（时间+紧急状态） -->
            <view class="order-header">
              <view class="order-time">
                <text class="time-icon">⏰</text>
                {{ order.createTime }}
              </view>
              <view class="order-urgency" v-if="order.isUrgent">
                紧急
              </view>
            </view>

            <!-- 工单核心信息（地址+需求） -->
            <view class="order-info">
              <view class="info-row">
                <text class="info-label">地址：</text>
                <text class="info-value">{{ order.address }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">需求：</text>
                <text class="info-value">{{ order.des }}</text>
              </view>
            </view>

            <!-- 抢单按钮（简化样式） -->
            <button 
              class="grab-btn" 
              @click="grabOrder(order.id)"
            >
              立即抢单
            </button>
          </view>
        </view>

        <!-- 空状态提示（无工单时显示） -->
        <view class="empty-state" v-if="orderList.length === 0 && !isRefreshing">
          <image class="empty-icon" src="/static/empty/order-empty.png" mode="widthFix"></image>
          <view class="empty-text">当前暂无工单</view>
          <view class="empty-subtext">请稍后刷新或尝试其他筛选条件</view>
          <button class="refresh-btn" @click="onRefresh">
            刷新试试
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { getOrderList, grabOrder as grabOrderApi, searchOrdersByTitle, updateEmployeeLocation } from '../../api/order.js'


// 状态管理：工单列表、刷新状态
const orderList = ref([])
const isRefreshing = ref(false)
const startY = ref(0) // 下拉刷新起始坐标
const showSearchPopup = ref(false) // 控制搜索弹窗显示
const searchKeyword = ref('') // 搜索关键词
const isSearching = ref(false) // 是否处于搜索状态
const allOrders = ref([]) // 存储所有工单用于取消搜索时恢复
const address = ref('正在获取位置...'); // 存储详细地址

// 位置更新相关状态
const locationUpdateTimer = ref(null)
const lastLocation = ref({ latitude: 0, longitude: 0 })
const isLocationUpdating = ref(false)

// 获取订单标签的CSS类名
const getOrderTagClass = (type) => {
  // 确保type是字符串类型
  const typeStr = typeof type === 'number' ? type.toString() : type;
  return `order-tag--${typeStr.toLowerCase()}`
}

// 获取订单类型名称
const getOrderTypeName = (type) => {
  // 根据type值返回对应的名称
  switch (type) {
    case 1:
      return '紧急'
    case 2:
      return '普通'
    default:
      return type.toString()
  }
}

// 判断是否为紧急订单
const isUrgentOrder = (type) => {
  return type === 1
}

// 页面加载时初始化工单数据
onMounted(() => {
  // 加载初始工单数据
  loadOrderList()
  // 初始化位置更新功能
  initLocationUpdate()
  // 立即尝试获取一次位置，确保登录后能正确显示地址
  initLocation()
  
  // 监听重新登录事件
  uni.$on('reinit-location-service', () => {
    console.log('收到重新初始化位置服务事件');
    // 重新初始化位置服务
    stopLocationUpdate();
    initLocationUpdate();
    initLocation();
  });
})

// 页面卸载时清理定时器
onUnmounted(() => {
  stopLocationUpdate()
  // 移除事件监听
  uni.$off('reinit-location-service');
})

// 初始化位置更新功能
const initLocationUpdate = () => {
  console.log('初始化位置更新功能')
  // 清除已存在的定时器
  if (locationUpdateTimer.value) {
    clearInterval(locationUpdateTimer.value)
  }
  
  // 立即获取一次位置
  updateEmployeeLocationInfo()
  
  // 设置定时器，每10分钟检查一次位置
  locationUpdateTimer.value = setInterval(() => {
    updateEmployeeLocationInfo()
  }, 600000) // 10分钟检查一次位置
}

// 计算两点间距离（单位：米）
const calculateDistance = (lat1, lon1, lat2, lon2) => {
  const R = 6371e3 // 地球半径（米）
  const φ1 = lat1 * Math.PI/180 // φ, λ in radians
  const φ2 = lat2 * Math.PI/180
  const Δφ = (lat2-lat1) * Math.PI/180
  const Δλ = (lon2-lon1) * Math.PI/180

  const a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
          Math.cos(φ1) * Math.cos(φ2) *
          Math.sin(Δλ/2) * Math.sin(Δλ/2)
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a))

  return R * c // 距离（米）
}

// 更新员工位置信息
const updateEmployeeLocationInfo = () => {
  // 检查是否正在更新位置
  if (isLocationUpdating.value) {
    console.log('位置更新正在进行中，跳过本次更新')
    return
  }
  
  // 检查用户是否已登录
  const userInfo = uni.getStorageSync('userInfo')
  if (!userInfo || !userInfo.userId) {
    console.log('用户未登录，跳过位置更新')
    return
  }
  
  isLocationUpdating.value = true
  
  // 获取当前位置
  uni.getLocation({
    type: 'gcj02',
    success: (res) => {
      const { latitude, longitude } = res
      console.log('获取到当前位置:', { latitude, longitude })
      
      // 检查是否移动超过1米
      const distance = lastLocation.value.latitude === 0 ? 999999 : 
        calculateDistance(
          lastLocation.value.latitude, 
          lastLocation.value.longitude, 
          latitude, 
          longitude
        )
      
      console.log('距离上次位置:', distance, '米')
      
      // 如果移动超过1米或者首次获取位置，则更新数据库
      if (distance >= 1) {
        console.log('位置变化超过1米，更新数据库')
        lastLocation.value = { latitude, longitude }
        
        // 使用高德地图SDK获取详细地址信息
        try {
          const AMapWX = require('../../utils/amap-wx.130.js').AMapWX
          const amapPlugin = new AMapWX({key: '7e65cfdf80d56d856bc45986b5bafab0'})
          
          amapPlugin.getRegeo({
            location: `${longitude},${latitude}`,
            success: (data) => {
              const addressInfo = data[0] && data[0].name ? data[0].name : ''
              console.log('获取到详细地址:', addressInfo)
              
              // 调用后端接口更新位置和地址信息
              updateEmployeeLocation({
                employeeId: userInfo.userId,
                longitude: longitude,
                latitude: latitude,
                address: addressInfo
              }).then(response => {
                console.log('位置更新成功:', response)
                isLocationUpdating.value = false
                // 更新页面显示的地址
                address.value = addressInfo || '获取地址失败'
              }).catch(error => {
                console.error('位置更新失败:', error)
                isLocationUpdating.value = false
                // 即使更新位置失败，也更新页面显示的地址
                address.value = addressInfo || '获取地址失败'
              })
            },
            fail: (error) => {
              console.error('获取详细地址失败:', error)
              // 即使获取地址失败，也要更新位置信息
              updateEmployeeLocation({
                employeeId: userInfo.userId,
                longitude: longitude,
                latitude: latitude,
                address: ''
              }).then(response => {
                console.log('位置更新成功:', response)
                isLocationUpdating.value = false
                // 更新页面显示的地址
                address.value = '地址解析失败'
              }).catch(error => {
                console.error('位置更新失败:', error)
                isLocationUpdating.value = false
                address.value = '地址解析失败'
              })
            }
          })
        } catch (e) {
          console.error('高德地图SDK初始化失败:', e)
          // SDK初始化失败时的处理
          updateEmployeeLocation({
            employeeId: userInfo.userId,
            longitude: longitude,
            latitude: latitude,
            address: ''
          }).then(response => {
            console.log('位置更新成功:', response)
            isLocationUpdating.value = false
            address.value = '地址解析失败'
          }).catch(error => {
            console.error('位置更新失败:', error)
            isLocationUpdating.value = false
            address.value = '地址解析失败'
          })
        }
      } else {
        console.log('位置变化小于1米，无需更新')
        isLocationUpdating.value = false
      }
    },
    fail: (err) => {
      console.error('获取位置失败:', err)
      isLocationUpdating.value = false
      // 获取位置失败时，尝试使用initLocation方法获取
      initLocation()
    }
  })
}

// 停止位置更新
const stopLocationUpdate = () => {
  if (locationUpdateTimer.value) {
    clearInterval(locationUpdateTimer.value)
    locationUpdateTimer.value = null
  }
}

// 加载工单列表（从后端接口获取数据）
const loadOrderList = async () => {
  try {
    // 调用后端接口获取工单列表
    const res = await getOrderList()
    console.log('API返回的原始数据:', res)
    
    // 处理返回的数据 (根据实际API返回，code为0表示成功)
    if (res && res.code === 0) {
      console.log('API返回的工单数据:', res.data)
      
      // 过滤出状态为0（待分配）的工单
      const pendingOrders = res.data.filter(order => {
        console.log(`检查工单 ${order.id} 的状态:`, order.status, typeof order.status)
        return order.status === 0
      })
      
      console.log('过滤后的待分配工单:', pendingOrders)
      
      allOrders.value = pendingOrders.map(order => ({
        ...order,
        // 处理type字段，确保是字符串类型
        type: typeof order.type === 'number' ? order.type.toString() : order.type
      }))
      
      // 如果正在搜索，更新搜索结果；否则显示所有工单
      if (isSearching.value) {
        performSearch()
      } else {
        orderList.value = allOrders.value
      }
      
      console.log('最终显示的工单列表:', orderList.value)
    } else {
      uni.showToast({
        title: res?.msg || '获取工单失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('获取工单列表失败:', error)
    uni.showToast({
      title: '网络错误',
      icon: 'none',
      duration: 2000
    })
  }
}

// 下拉刷新相关逻辑
const handleTouchStart = (e) => {
  startY.value = e.touches[0].clientY
}

const handleTouchEnd = (e) => {
  const endY = e.changedTouches[0].clientY
  // 下拉距离超过100rpx且不在刷新中时触发刷新
  if (endY - startY.value > 100 && !isRefreshing.value) {
    onRefresh()
  }
}

// 手动刷新工单列表
const onRefresh = async () => {
  isRefreshing.value = true
  await loadOrderList()
  // 刷新完成后延迟关闭动画，提升体验
  setTimeout(() => {
    isRefreshing.value = false
  }, 500)
}

// 抢单操作（简化逻辑）
const grabOrder = async (orderId) => {
  try {
    // 调用实际的抢单接口
    const res = await grabOrderApi(orderId)
    
    if (res && res.code === 0) {
      // 抢单成功：提示+隐藏当前工单
      uni.showToast({
        title: '抢单成功！',
        icon: 'success',
        duration: 1500
      })

      // 删除工单（直接从列表中移除）
      const orderIndex = orderList.value.findIndex(item => item.id === orderId)
      if (orderIndex !== -1) {
        orderList.value.splice(orderIndex, 1)
      }
      
      // 同时从所有工单中移除
      const allOrderIndex = allOrders.value.findIndex(item => item.id === orderId)
      if (allOrderIndex !== -1) {
        allOrders.value.splice(allOrderIndex, 1)
      }
    } else {
      uni.showToast({
        title: res?.msg || '抢单失败，请重试',
        icon: 'none',
        duration: 1500
      })
    }
  } catch (error) {
    console.error('抢单失败:', error)
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none',
      duration: 1500
    })
  }
}

// 执行搜索
const performSearch = async () => {
  if (!searchKeyword.value.trim()) {
    // 如果搜索关键词为空，则显示所有工单
    orderList.value = allOrders.value
    isSearching.value = false
    showSearchPopup.value = false
    return
  }
  
  try {
    // 调用后端搜索接口
    const res = await searchOrdersByTitle(searchKeyword.value)
    
    if (res && res.code === 0) {
      // 过滤出状态为0（待分配）的工单
      const pendingOrders = res.data.filter(order => order.status === 0)
      
      orderList.value = pendingOrders.map(order => ({
        ...order,
        type: typeof order.type === 'number' ? order.type.toString() : order.type
      }))
      
      isSearching.value = true
      showSearchPopup.value = false
      
      uni.showToast({
        title: `找到 ${orderList.value.length} 条记录`,
        icon: 'none',
        duration: 2000
      })
    } else {
      uni.showToast({
        title: res?.msg || '搜索失败',
        icon: 'none',
        duration: 2000
      })
    }
  } catch (error) {
    console.error('搜索失败:', error)
    uni.showToast({
      title: '网络错误',
      icon: 'none',
      duration: 2000
    })
  }
}

// 清除搜索状态
const clearSearch = () => {
  searchKeyword.value = ''
  isSearching.value = false
  orderList.value = allOrders.value
}

// 监听搜索关键词变化，支持实时搜索
watch(searchKeyword, (newVal) => {
  if (!newVal.trim()) {
    clearSearch()
  }
})

// 初始化位置获取逻辑 - 完全使用高德地图SDK
const initLocation = () => {
  console.log('开始获取位置信息');
  
  try {
    // 根据项目规范和实际导出方式，使用require导入CommonJS模块，并通过.AMapWX访问
    const amapWX = require('../../utils/amap-wx.130.js');
    console.log('高德地图 SDK 加载成功:', amapWX);
    
    // 检查 AMapWX 构造函数是否存在
    const AMapWX = amapWX.AMapWX;
    if (typeof AMapWX !== 'function') {
      throw new Error('AMapWX is not a constructor');
    }
    
    // 初始化 SDK
    const amap = new AMapWX({ key: '7e65cfdf80d56d856bc45986b5bafab0' });
    console.log('高德地图 SDK 初始化成功');
    
    // 使用高德地图SDK获取位置并进行逆地理编码
    console.log('开始使用高德地图SDK获取位置');
    amap.getRegeo({
      success: (result) => {
        console.log('逆地理编码成功:', result);
        if (result && result[0]) {
          // 显示详细地址
          address.value = result[0].desc; 
          console.log('详细地址:', address.value);
          
          // 同时显示坐标信息
          const longitude = result[0].longitude;
          const latitude = result[0].latitude;
          console.log('获取到的经纬度:', { latitude, longitude });
          
          // 获取用户信息
          const userInfo = uni.getStorageSync('userInfo');
          console.log('获取到的用户信息:', userInfo);
          
          if (userInfo && userInfo.userId) {
            // 准备要发送的位置数据
            const locationData = {
              employeeId: userInfo.userId,
              longitude: longitude,
              latitude: latitude,
              address: address.value
            };
            
            console.log('准备发送的位置数据:', locationData);
            
            // 调用接口保存位置信息到数据库
            updateEmployeeLocation(locationData).then(response => {
              console.log('位置信息保存成功:', response);
              if (response && response.code !== 0) {
                console.error('位置信息保存接口返回错误:', response.msg);
              }
            }).catch(error => {
              console.error('位置信息保存失败:', error);
            });
          } else {
            console.log('用户未登录或缺少userId，无法保存位置信息');
          }
        } else {
          console.log('逆地理编码返回空结果');
        }
      },
      fail: (err) => {
        console.error('逆地理编码失败:', err);
        // 根据项目规范，简化API调用失败时的错误处理逻辑
        address.value = '地址解析失败';
      },
    });
  } catch (error) {
    console.error('高德地图 SDK 初始化失败:', error);
    // 如果 SDK 初始化失败，显示通用错误信息
    address.value = '地址解析失败';
  }
};
</script>

<style scoped>
/* 全局容器：背景优化+底部留白 */
.hall-container {
  min-height: 100vh;
  padding-bottom: 120rpx;
  background-color: #f5f7fa; /* 柔和背景色，避免刺眼 */
}

/* 顶部标题栏：固定定位+搜索入口 */
.header-bar {
  position: sticky;
  top: 0;
  z-index: 99;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 25rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.03); /* 轻微阴影，区分内容区 */
}

.page-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
}

/* 搜索按钮：胶囊样式 */
.search-btn {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  background-color: #f3f4f6;
  border-radius: 24rpx;
  font-size: 20rpx;
  color: #6b7280;
}

.search-icon {
  margin-right: 8rpx;
  font-size: 22rpx;
}

/* 搜索弹窗样式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.search-popup {
  background-color: white;
  width: 80%;
  border-radius: 16rpx;
  padding: 30rpx;
}

.search-header {
  display: flex;
  margin-bottom: 30rpx;
}

.search-input {
  flex: 1;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  padding: 15rpx;
  margin-right: 20rpx;
}

.search-button {
  background-color: #1677ff;
  color: white;
  border: none;
  border-radius: 8rpx;
  padding: 15rpx 30rpx;
}

.search-footer {
  display: flex;
  justify-content: center;
}

.cancel-button {
  background-color: #f5f5f5;
  color: #333;
  border: none;
  border-radius: 8rpx;
  padding: 15rpx 30rpx;
}

.search-info {
  padding: 20rpx;
  background-color: #f0f8ff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.clear-search {
  color: #1677ff;
  text-decoration: underline;
}

/* 工单列表容器：内边距优化 */
.order-list-container {
  padding: 25rpx 20rpx;
}

/* 下拉刷新区域 */
.refresh-wrapper {
  transition: transform 0.3s ease;
}

.refresh-wrapper.refreshing {
  transform: translateY(50rpx);
}

/* 刷新图标动画 */
.refresh-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
  height: 40rpx;
}

.spinner {
  width: 30rpx;
  height: 30rpx;
  border: 3rpx solid rgba(22, 119, 255, 0.2);
  border-radius: 50%;
  border-top-color: #1677ff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 工单列表：间距调整 */
.order-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 工单卡片：精致样式+悬浮效果 */
.order-item {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 25rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04); /* 柔和阴影，增强立体感 */
  position: relative;
  transition: all 0.2s ease;
  animation: fadeIn 0.3s ease forwards;
}

/* 已抢单工单：半透明+灰度处理 */
.order-item--grabbed {
  opacity: 0.7;
  filter: grayscale(0.3);
}

/* 工单类型标签：右上角定位+颜色区分 */
.order-tag {
  position: absolute;
  top: -12rpx;
  right: 25rpx;
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  font-size: 18rpx;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 紧急订单标签样式 */
.order-tag--1 {
  background: linear-gradient(90deg, #ff4d4f 0%, #f5222d 100%);
}

/* 普通订单标签样式 */
.order-tag--2 {
  background: linear-gradient(90deg, #1677ff 0%, #0e62d4 100%);
}

/* 紧急标识：右上角红色突出显示 */
.order-urgency-badge {
  position: absolute;
  top: -12rpx;
  right: 90rpx; /* 避免与订单类型标签重叠 */
  padding: 6rpx 12rpx;
  background-color: #ff4d4f;
  color: #fff;
  font-size: 18rpx;
  border-radius: 16rpx;
  font-weight: 500;
  box-shadow: 0 2rpx 8rpx rgba(255, 77, 79, 0.3);
  z-index: 10;
  animation: pulse 2s infinite;
}

/* 工单类型标签的不同类型样式 */
.order-tag--urgent {
  background-color: #ff4d4f;
}

.order-tag--normal {
  background-color: #1677ff;
}

.order-tag--default {
  background-color: #6b7280;
}



/* 工单头部：时间+紧急状态 */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 15rpx;
  border-bottom: 1rpx solid #f3f4f6; /* 细分割线，区分区域 */
}

.order-time {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  color: #6b7280;
}

.time-icon {
  margin-right: 8rpx;
  font-size: 22rpx;
}

/* 紧急标签：红色突出 */
.order-urgency {
  padding: 4rpx 12rpx;
  background-color: #fff2f0;
  color: #ff4d4f;
  font-size: 18rpx;
  border-radius: 12rpx;
  font-weight: 500;
}

/* 工单信息区：间距+标签对齐 */
.order-info {
  margin-bottom: 25rpx;
}

.info-row {
  display: flex;
  margin-bottom: 16rpx;
  font-size: 22rpx;
  line-height: 1.5;
}

/* 最后一行取消下间距 */
.info-row:last-child {
  margin-bottom: 0;
}

/* 信息标签：固定宽度+灰色 */
.info-label {
  width: 120rpx;
  color: #6b7280;
  font-weight: 500;
}

/* 信息值：黑色+溢出省略 */
.info-value {
  flex: 1;
  color: #1f2937;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行，超出省略 */
  -webkit-box-orient: vertical;
}

/* 报酬行：特殊颜色突出 */
.info-row--price .info-value {
  color: #1677ff;
  font-weight: 600;
  font-size: 24rpx;
}

/* 抢单按钮：简化样式 */
.grab-btn {
  width: 100%;
  padding: 18rpx;
  background-color: #1677ff;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  font-size: 26rpx;
  font-weight: 500;
}

/* 空状态：居中提示 */
.empty-state {
  text-align: center;
  padding: 100rpx 20rpx;
}

.empty-icon {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 30rpx;
  color: #6b7280;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.empty-subtext {
  font-size: 24rpx;
  color: #9ca3af;
  margin-bottom: 40rpx;
}

.refresh-btn {
  padding: 0 40rpx;
  height: 70rpx;
  line-height: 70rpx;
  background-color: #1677ff;
  color: #fff;
  border-radius: 35rpx;
  font-size: 26rpx;
}

/* 工单进入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 每个工单延迟出现，增强层次感 */
.order-item:nth-child(1) {
  animation-delay: 0.1s;
}
.order-item:nth-child(2) {
  animation-delay: 0.2s;
}
.order-item:nth-child(3) {
  animation-delay: 0.3s;
}
.order-item:nth-child(4) {
  animation-delay: 0.4s;
}

  /* 动画效果：淡入 */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20rpx);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 动画效果：脉冲 */
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  /* 响应式适配：大屏优化 */
  @media (min-width: 768px) {
    .hall-container {
      max-width: 750rpx;
      margin: 0 auto;
    }
    
    .header-bar {
      padding: 20rpx 30rpx;
    }
    
    .order-list-container {
      padding: 30rpx;
    }
  }
</style>